<template>
  <div class="page-header-index-wide">
    <a-row>
      <a-col :span="24">
        <a-card :bordered="false" title="职员数据统计分析" :style="{ marginTop: '12px' }">
          <a-row>
            <a-col :span="12">
              <div id="echart2" style="height: 400px"></div>
            </a-col>
            <a-col :span="12">
              <div id="echart1" style="height: 400px"></div>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24">
        <a-card :bordered="false" title="数据联动" :style="{ marginTop: '12px' }">
          <a-row>
            <a-col :span="24">
              <div id="echart3" style="height: 600px"></div>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
    <!-- <a-row :gutter="24">
      <a-col :sm="24" :md="8" :xl="8" :style="{ marginBottom: '12px' }">
        <chart-card :loading="loading" title="职员变化" :total="8846 | NumberFormat">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-bar :height="50" />
          </div>
          <template slot="footer"
            >今日入职<span> {{ '1234' | NumberFormat }}</span></template
          >
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="8" :xl="8" :style="{ marginBottom: '12px' }">
        <chart-card :loading="loading" title="转正人数" :total="6560 | NumberFormat">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-area />
          </div>
          <template slot="footer">今日转正人数 <span>60（人）</span></template>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="8" :xl="8" :style="{ marginBottom: '12px' }">
        <chart-card :loading="loading" title="运营活动效果" total="78%">
          <a-tooltip title="指标说明" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-progress color="rgb(19, 194, 194)" :target="80" :percentage="78" :height="8" />
          </div>
          <template slot="footer">
            <trend flag="down" style="margin-right: 16px">
              <span slot="term">同周比</span>
              12%
            </trend>
            <trend flag="up">
              <span slot="term">日环比</span>
              80%
            </trend>
          </template>
        </chart-card>
      </a-col>
    </a-row> -->

    <!-- <a-card :loading="loading" :bordered="false" :body-style="{ padding: '0' }">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{ marginBottom: '12px', paddingLeft: '16px' }">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <div class="extra-item">
              <a>今日</a>
              <a>本周</a>
              <a>本月</a>
              <a>本年</a>
            </div>
            <a-range-picker :style="{ width: '256px' }" />
          </div>
          <a-tab-pane loading="true" tab="职员统计" key="1">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <pie :dataSource="pieData" />
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list title="门店销售排行榜" :list="rankList" />
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane tab="职员变化" key="2">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <bar title="入职趋势" :dataSource="barData" />
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <rank-list title="门店销售排行榜" :list="rankList" />
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card> -->

    <!-- <a-row>
      <a-col :span="24">
        <a-card :loading="loading" :bordered="false" title="最近一周访问量统计" :style="{ marginTop: '12px' }">
          <a-row>
            <a-col :span="6">
              <head-info title="今日IP" :content="loginfo.todayIp"></head-info>
            </a-col>
            <a-col :span="2">
              <a-spin class="circle-cust">
                <a-icon slot="indicator" type="environment" style="font-size: 24px" />
              </a-spin>
            </a-col>
            <a-col :span="6">
              <head-info title="今日访问" :content="loginfo.todayVisitCount"></head-info>
            </a-col>
            <a-col :span="2">
              <a-spin class="circle-cust">
                <a-icon slot="indicator" type="team" style="font-size: 24px" />
              </a-spin>
            </a-col>
            <a-col :span="6">
              <head-info title="总访问量" :content="loginfo.totalVisitCount"></head-info>
            </a-col>
            <a-col :span="2">
              <a-spin class="circle-cust">
                <a-icon slot="indicator" type="rise" style="font-size: 24px" />
              </a-spin>
            </a-col>
          </a-row>
          <line-chart-multid :fields="visitFields" :dataSource="visitInfo"></line-chart-multid>
        </a-card>
      </a-col>
    </a-row> -->
  </div>
</template>

<script>
import * as echarts from 'echarts/core'
import {
  TooltipComponent,
  ToolboxComponent,
  LegendComponent,
  DatasetComponent,
  GridComponent,
} from 'echarts/components'
import {  LineChart,PieChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'

echarts.use([
  ToolboxComponent,
  TooltipComponent,
  LegendComponent,
  LineChart,
  PieChart,
  CanvasRenderer,
  DatasetComponent,
  GridComponent,
])

import DashChartDemo from '@/components/chart/DashChartDemo'
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import RankList from '@/components/chart/RankList'
import Bar from '@/components/chart/Bar'
import Pie from '@/components/chart/Pie'
import LineChartMultid from '@/components/chart/LineChartMultid'

import ChartCard from '@/components/ChartCard'
import ACol from 'ant-design-vue/es/grid/Col'
import ATooltip from 'ant-design-vue/es/tooltip/Tooltip'
import HeadInfo from '@/components/tools/HeadInfo.vue'

import Trend from '@/components/Trend'
import { getLoginfo, getVisitInfo } from '@/api/api'

const rankList = []
for (let i = 0; i < 7; i++) {
  rankList.push({
    name: '部门 ' + (i + 1) + ' 号店',
    total: 1234.56 - i * 100,
  })
}
const barData = []
for (let i = 0; i < 12; i += 1) {
  barData.push({
    x: `${i + 1}月`,
    y: Math.floor(Math.random() * 1000) + 200,
  })
}
export default {
  name: 'IndexChart',
  components: {
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    DashChartDemo,
    RankList,
    Bar,
    Pie,
    Trend,
    LineChartMultid,
    HeadInfo,
  },
  data() {
    return {
      lineData: [],
      pieData: [
        { value: 2, key: '中专' },
        { value: 3, key: '中技' },
        { value: 1, key: '其他' },
        { value: 1, key: '初中' },
        { value: 1, key: '博士' },
        { value: 1, key: '大专' },
        { value: 4, key: '本科' },
        { value: 1, key: '硕士' },
        { value: 1, key: '高中' },
      ],
      chartDataList: [
        ['中专', 2],
        ['中技', 3],
        ['其他', 1],
        ['初中', 1],
        ['博士', 1],
        ['大专', 1],
        ['本科', 4],
        ['硕士', 1],
        ['高中', 1],
      ],
      barData: [],
      loading: true,
      center: null,
      rankList,
      barData,
      loginfo: {},
      visitFields: ['ip', 'visit'],
      visitInfo: [],
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
    }
  },
  created() {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
    this.initLogInfo()
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    initLogInfo() {
      getLoginfo(null).then((res) => {
        if (res.success) {
          Object.keys(res.result).forEach((key) => {
            res.result[key] = res.result[key] + ''
          })
          this.loginfo = res.result
        }
      })
      getVisitInfo().then((res) => {
        if (res.success) {
          console.log('aaaaaa', res.result)
          this.visitInfo = res.result
        }
      })
    },
    drawLine() {
      var chartDom = document.getElementById('echart1')
      var chartDom2 = document.getElementById('echart2')
      var chartDom3 = document.getElementById('echart3')
      var myChart = echarts.init(chartDom)
      var myChart2 = echarts.init(chartDom2)
      var myChart3 = echarts.init(chartDom3)
      myChart.setOption({
        legend: {
          top: 'bottom',
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            // dataView: { show: true, readOnly: false },
            // restore: { show: true },
            // saveAsImage: { show: true },
          },
        },
        series: [
          {
            name: '面积模式',
            type: 'pie',
            radius: [30, 160],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8,
            },
            /* data: [
              { value: 40, name: '部门A' },
              { value: 38, name: '部门B' },
              { value: 32, name: '部门C' },
              { value: 30, name: '部门D' },
              { value: 28, name: '部门E' },
              { value: 26, name: '部门F' },
              { value: 22, name: '部门G' },
              { value: 18, name: '部门H' },
            ], */
            data: [
              { value: 40, name: '南京BU' },
              { value: 38, name: '武汉BU' },
              { value: 32, name: '广州BU' },
              { value: 30, name: '杭州BU' },
              { value: 28, name: '成都BU' },
              { value: 26, name: '大连BU' },
              { value: 22, name: '北京BU' },
              { value: 18, name: '天津BU' },
            ],
          },
        ],
      })
      myChart2.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
        },
        legend: {
          //data: ['5K以下','5~9K', '9~13K', '13~15K', '15~17K', '17~20K', '20K以上'],
          data: ['实习生','19届管培生', '20届管培生','21届管培生', 'BU定岗员工', '派遣工', '临时工', '正式工'],
        },
        series: [
          {
            name: '职员薪资',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],
            label: {
              position: 'inner',
              fontSize: 14,
            },
            labelLine: {
              show: false,
            },
            /* data: [
              { value: 1548, name: '5K以下' },
              { value: 775, name: '5~10K' },
              { value: 679, name: '10K以上', selected: true },
            ], */
            data: [
              { value: 1548, name: '正式工' },
              { value: 775, name: '19届管培生' },
              { value: 679, name: '实习生', selected: true },
            ],
          },
          {
            //name: '职员薪资',
            name: '员工类型',
            type: 'pie',
            radius: ['45%', '60%'],
            labelLine: {
              length: 30,
            },
            label: {
              formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
              backgroundColor: '#F6F8FC',
              borderColor: '#8C8D8E',
              borderWidth: 1,
              borderRadius: 4,

              rich: {
                a: {
                  color: '#6E7079',
                  lineHeight: 18,
                  align: 'center',
                },
                hr: {
                  borderColor: '#8C8D8E',
                  width: '100%',
                  borderWidth: 1,
                  height: 0,
                },
                b: {
                  color: '#4C5058',
                  fontSize: 14,
                  fontWeight: 'bold',
                  lineHeight: 25,
                },
                per: {
                  color: '#fff',
                  backgroundColor: '#4C5058',
                  padding: [3, 4],
                  borderRadius: 4,
                },
              },
            },
            /* data: [
              { value: 400, name: '5K以下' },
              { value: 310, name: '5~9K' },
              { value: 220, name: '9~13K' },
              { value: 190, name: '13~15K' },
              { value: 150, name: '15~17K' },
              { value: 90, name: '20K以上' },
            ], */
            data: [
              { value: 400, name: '实习生' },
              { value: 310, name: '19届管培生' },
              { value: 220, name: '20届管培生' },
              { value: 190, name: 'BU定岗员工' },
              { value: 150, name: '派遣工' },
              { value: 90, name: '临时工' },
            ],
          },
        ],
      })
      setTimeout(() => {
        let option = {
          legend: {},
          tooltip: {
            trigger: 'axis',
            showContent: false,
          },
          dataset: {
            source: [
              ['产品A', '2012', '2013', '2014', '2015', '2016', '2017'],
              ['产品B', 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
              ['产品C', 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
              ['产品D', 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
              ['产品E', 25.2, 37.1, 41.2, 18, 33.9, 49.1],
            ],
          },
          xAxis: { type: 'category' },
          yAxis: { gridIndex: 0 },
          grid: { top: '55%' },
          series: [
            { type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: { focus: 'series' } },
            { type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: { focus: 'series' } },
            { type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: { focus: 'series' } },
            { type: 'line', smooth: true, seriesLayoutBy: 'row', emphasis: { focus: 'series' } },
            {
              type: 'pie',
              id: 'pie',
              radius: '30%',
              center: ['50%', '25%'],
              emphasis: { focus: 'data' },
              label: {
                formatter: '{b}: {@2012} ({d}%)',
              },
              encode: {
                itemName: '产品A',
                value: '2012',
                tooltip: '2012',
              },
            },
          ],
        }
        myChart3.on('updateAxisPointer', function (event) {
          var xAxisInfo = event.axesInfo[0]
          if (xAxisInfo) {
            var dimension = xAxisInfo.value + 1
            myChart3.setOption({
              series: {
                id: 'pie',
                label: {
                  formatter: '{b}: {@[' + dimension + ']} ({d}%)',
                },
                encode: {
                  value: dimension,
                  tooltip: dimension,
                },
              },
            })
          }
        })
        myChart3.setOption(option)
      })
    },
  },
}
</script>

<style lang="less" scoped>
.circle-cust {
  position: relative;
  top: 28px;
  left: -100%;
}
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

/* 首页访问量统计 */
.head-info {
  position: relative;
  text-align: left;
  padding: 0 32px 0 0;
  min-width: 125px;

  &.center {
    text-align: center;
    padding: 0 32px;
  }

  span {
    color: rgba(0, 0, 0, 0.45);
    display: inline-block;
    font-size: 0.95rem;
    line-height: 42px;
    margin-bottom: 4px;
  }
  p {
    line-height: 42px;
    margin: 0;
    a {
      font-weight: 600;
      font-size: 1rem;
    }
  }
}
</style>